<template>
    <span :style="style">{{ field.value }}</span>
</template>

<script>
export default {
    props: ['resourceName', 'field'],
    computed: {
        style() {
            if (this.field.indexMaxWidth) {
                return {
                    'display': 'inline-block',
                    'max-width': `${this.field.indexMaxWidth}px`,
                    'overflow': 'hidden',
                    'text-overflow': 'ellipsis',
                    'white-space': 'nowrap',
                }
            } else {
                return {}
            }
        }
    }
}
</script>
